<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>34-Vue组件-组件动画</title>
  <script src="js/vue.js"></script>
  <style>
      .v-enter {
          opacity: 0;
          margin-left: 500px;
      }
      .v-enter-to {
          opacity: 1;
      }
      .v-enter-active {
          transition: all 3s;
      }
      .v-leave {
          opacity: 1;
      }
      .v-leave-to {
          opacity: 0;
      }
      .v-leave-active {
          transition: all 3s;
          margin-left: 500px;
      }
  </style>
</head>
<body>
<div id="app">
  <button @click="toggle">组件切换</button>
  <transition mode="out-in">
    <component v-bind:is="name"></component>
  </transition>
</div>
<template id="home">
  <div>
    <p>组件首页 </p>
    <input type="checkbox"/>
  </div>
</template>
<template id="photo">
  <img width="200px" src="images/bg.jpg"/>
</template>
</body>
<script>
  <!-- 自定义全局组件 -->
  Vue.component("home", {
    template: '#home'
  })

  Vue.component("photo", {
    template: '#photo'
  })

  /* 1. 创建 vue 实例对象 */
  let vm1 = new Vue({
    // 2. 声明vue的实例对象控制页面的哪个区域
    el: '#app',
    // 3. 声明vue控制区域可以使用的数据
    data() {
      return {
        isShow: true,
        name: 'home'
      }
    },
    methods: {
      toggle() {
        this.isShow = !this.isShow
        this.name = this.name === 'home' ? 'photo' : 'home'
      }
    }
  })
</script>
</html>
<!--
1. 如何给组件添加动画？
给组件添加动画和给元素添加过渡一样，如果是单个组件就是用transition 多个用 transition-group

2. 过渡动画注意点
默认情况下，进入动画和离开动画是同时进行的，如果想一个完成后再进行另一个，需要制定过渡模式
<transition mode="out-in">
- in-out 新元素先进行过渡，完成之后当前元素过渡离开
- out-in 当前元素先进行过渡，完成之后新元素过渡进入
-->
